<template>
  <div class="aa">
    <van-nav-bar
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      style="background-color: #f9f9f9"
    />

    <h1>以岭中药材</h1>
    <div id="chongzhi">
      <van-cell-group>
        <van-field
          v-model="value1"
          name="extra"
          placeholder="输入手机号码"
          style="background-color: #f9f9f9"
        >
          <template #left-icon>
            <div>
              <img
                src="../../assets/shouji.png"
                alt=""
                class="geshi"
                style="margin-right: 20px"
              />
            </div>
          </template>
        </van-field>

        <van-field
          v-model="sms"
          center
          clearable
          placeholder="短信验证码"
          style="background-color: #f9f9f9"
        >
          <template #left-icon>
            <div>
              <img
                src="../../assets/daunxin.png"
                alt=""
                class="geshi"
                style="margin-right: 20px"
              />
            </div>
          </template>
          <template #button>
            <van-button size="small" style="border: none;  background-color:#f9f9f9"
              >发送验证码</van-button
            >
          </template>
        </van-field>

        <van-field
          v-model="value2"
          style="background-color: #f9f9f9"
          placeholder="请设置密码"
        >
          <template #left-icon>
            <div>
              <img
                src="../../assets/suo.png"
                alt=""
                class="geshi"
                style="margin-right: 20px"
              />
            </div>
          </template>
        </van-field>
      </van-cell-group>
      <van-checkbox v-model="checked" checked-color="#1abc9c" style="font-size: 14px; margin-left: 14px;">已阅读并同意《<span style="color: #1abc9c;" @click="toxieyi">用户服务协议</span>》</van-checkbox>

      <van-button
        type="primary"
        size="large"
        style="
          border-radius: 30px;
          height: 40px;
          width: 320px;
          
          margin-top: 30px;
          "
        color="#1abc9c"
        >登录</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      value2: "",
      value1: "",
      sms: "",
      checked: false,
      activeIcon:'',
      inactiveIcon:''
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.push("/login");
    },
    toxieyi(){
      this.$router.push("/yongHuXieYi");
    
    }
  },
};
</script>

<style scoped lang="less">
.aa {
  background: #f9f9f9;
  height: 100vh;
}
h1 {
  font-size: 35px;
  text-align: center;
  margin-top: 60px;
}
.geshi {
  width: 20px;
  height: 20px;
}
#chongzhi {
  margin-top: 40px;
  box-sizing: border-box;
  padding: 0 30px;
}
.img-icon {
    height: 20px;
  }
</style>
